<template>
    <span>{{ displayValue }}</span>
  </template>
  
  <script setup lang="ts">
  import { ref, watch, onMounted } from 'vue'
  
  const props = defineProps({
    value: {
      type: Number,
      required: true
    },
    duration: {
      type: Number,
      default: 1000
    }
  })
  
  const displayValue = ref(0)
  
  const animate = () => {
    const start = 0
    const end = props.value
    const startTime = Date.now()
    
    const update = () => {
      const progress = Math.min((Date.now() - startTime) / props.duration, 1)
      displayValue.value = Math.floor(progress * end)
      if (progress < 1) {
        requestAnimationFrame(update)
      }
    }
    
    requestAnimationFrame(update)
  }
  
  onMounted(animate)
  watch(() => props.value, animate)
  </script>